<template>
    <div class="hooks">
        {{ dogName }}
        <div class="dog-list">
            <div class="dog-item" v-for="dog in dogs" :key="dog">
                <img :src="dog">
            </div>
        </div>
        <div><el-button type="primary" @click="getDog">获取一个小柯基</el-button></div>
    </div>
</template>
<script setup>
import useDog from '@/views/hook/useDog.js'
const { dogs, getDog, dogName } = useDog()

</script>

<style lang="scss" scoped>
.hooks {
    padding: 20px;
    background-color: white;

    .dog-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .dog-item {
            img {
                height: 200px;
            }
        }
    }
}
</style>